<template>
  <div>
    <table>
      <caption>欢迎光临_vue开发的收银系统_水果店</caption>
      <thead>
        <tr>
          苹果 10￥/ 斤, 折扣 &lt;8 折&gt;
        </tr>
      </thead>
      <tbody>
        <tr>
          请输入你要购买的斤数 <input v-model="num" type="text">
        </tr>
        <tr>
          <button @click="fn">结账买单</button>
        </tr>
        <tr>
          结账单: 总价 {{ sum }} ￥元 折价后: {{ zhehou }} ￥元 省了: {{ sheng }} ￥元
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      sum: "",
      zhehou: "",
      sheng: ""
    };
  },
  methods: {
    fn() {
      this.sum = this.num * 10
      this.zhehou = this.num * 8
      this.sheng = this.sum - this.zhehou
    }
  },
};
</script>

<style lang="less" scoped>
table {
  width: 600px;
  height: 100px;
  margin: 100px auto;
  tr {
    height: 25px;
    text-align: center;    
  }
}
</style>